<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画直线</title>
    <style>
        canvas {
            margin: 0 auto;
            border: 1px black solid;
            display: block;
        }
    </style>
</head>
<body>
    <canvas width="500px" height="500px" id="can"></canvas>

    <script>
        let can = document.querySelector("#can");
        let ctx = can.getContext('2d');
        ctx.beginPath();
        // 设置线宽
        ctx.lineWidth = 5;
        ctx.moveTo(100, 100);
        ctx.lineTo(400, 100);
        // 设置颜色
        ctx.strokeStyle = "yellow";
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(400, 100);
        ctx.lineTo(400, 400);
        ctx.strokeStyle = "green";
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(400, 400);
        ctx.lineTo(100, 400);
        ctx.strokeStyle = "red";
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.lineWidth = 5;
        ctx.moveTo(100, 400);
        ctx.lineTo(100, 100);
        ctx.strokeStyle = "purple";
        ctx.stroke();
        ctx.closePath();

    </script>

</body>
</html>
